<template>
  <div class="homePage">
    <!-- 我的订阅 -->
    <div class="appList">
      <div class="appListTitle">我的订阅</div>
      <div class="cardContainerAll">
        <ul>
          <li v-for="(item,index) in myAppList" :key="index">
            <card :card-data="item"/>
          </li>
        </ul>
      </div>
    </div>
    <br>

    <div class="appMiddleList" style="background:transparent;">
      <div class="middleContainerAll">
        <!-- 流程中心 -->
        <div class="middleContainer" style="width:10%;">
          <div class="middleContainer-header">
            <div class="title">流程中心</div>
            <div class="more">更多</div>
          </div>
          <div class="middleContainer-body">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane name="first">
                <span slot="label">
                  待办
                  <el-badge class="mark" :value="todoList.length" :max="99"/>
                </span>
                <processCenter :message-list="todoList"/>
              </el-tab-pane>

              <el-tab-pane name="second">
                <span slot="label">
                  发起
                  <el-badge class="mark" :value="launchList.length" :max="99"/>
                </span>
                <processCenter :message-list="launchList"/>
              </el-tab-pane>

              <el-tab-pane name="third">
                <span slot="label">
                  参与
                  <el-badge class="mark" :value="joinList.length" :max="99"/>
                </span>
                <processCenter :message-list="joinList"/>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>

        <!-- 消息中心&专题推荐 -->
        <div class="middleContainer" style="background:transparent;width:30%;">
          <!-- 消息中心 -->
          <div class="msgCenter" style="height:384px;">
            <div class="middleContainer-body">
              <el-tabs v-model="msgActiveName" @tab-click="handleClick">
                <el-tab-pane name="first">
                  <span slot="label">新闻公告</span>
                  <msgCenter :message-list="msgList"/>
                </el-tab-pane>

                <el-tab-pane name="second">
                  <span slot="label">消息通知</span>
                  <newsCenter :message-list="newsList"/>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
          <br>
          <br>
          <!-- 专题推荐 -->
          <div class="themeCenter">
            <el-carousel height="150px" @change="changeFun">
              <el-carousel-item v-for="(item,index) in cardDataList" :key="index">
                <div class="themeContainer">
                  <img v-if="item.imgUrl !==''" :src="item.imgUrl" alt="图片载入失败，请升级浏览器">
                  <img v-else src="../../assets/img/themeBack.png" alt="图片载入失败，请升级浏览器">
                  <div class="themeSign">{{ item.title }}</div>
                  <br>
                  <div class="themeTitle"/>
                  <br>
                  <div class="themeContent">{{item.describe}}</div>
                </div>
              </el-carousel-item>
            </el-carousel>

            <div class="middleContainer-body" style="overflow:hidden;margin-right:-15px;">
              <ul>
                <li v-for="(item,index) in themeCardList" :key="index">
                  <themeCard :card-data="item"/>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 日程安排 -->
        <div class="middleContainer" style="max-width:260px;min-width:260px;">
          <div class="middleContainer-header">
            <div class="title">日程安排</div>
          </div>
          <div class="middleContainer-body calenadar">
            <calendar
              class="event-calendar"
              :value="value"
              :disabled-days-of-week="disabled"
              :format="format"
              :clear-button="clear"
              :placeholder="placeholder"
              :pane="1"
              :has-input="false"
              :on-day-click="dayClick"
              :special-days="_dateMap"
            />
          </div>
          <div class="eventList" v-if="this.dayTodoList.length !==0">
            <ul>
              <li v-for="(item,index) in this.dayTodoList" :key="index">
                <todoCard :card-data="item"/>
              </li>
            </ul>
          </div>
          <div class="eventList" v-else>
            <ul>
              <li>
                您在这一日无待办事项
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <br>
    <!-- 常用服务 -->
    <div class="appList">
      <div class="appListTitle">常用服务</div>
      <div class="cardContainerAll">
        <ul>
          <li v-for="(item,index) in hotAppList" :key="index">
            <hotCard :card-data="item"/>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import card from "./components/card";
import hotCard from "./components/hotCard";
import processCenter from "./components/processCenter";
import msgCenter from "./components/msgCenter";
import newsCenter from "./components/newsCenter";
import themeCard from "./components/themeCard";
import calendar from "vue2-slot-calendar";
import todoCard from "./components/todoCard";
import {
  getHotAppList,
  getAllTodoProcessTask,
  getAllNotice,
  getMessageTask,
  getMyAppList,
  getThemeList,
  getSchedule,
  getScheduleByDate
} from "@/api/home";

export default {
  components: {
    card,
    hotCard,
    calendar,
    processCenter,
    msgCenter,
    newsCenter,
    themeCard,
    todoCard
  },
  data() {
    return {
      disabled: [], // 禁用的日期
      value: new Date(), // 值
      format: "yyyy-MM-dd", // 文本框中显示的日期格式
      clear: false, // 是否在文本框右侧显示清除按钮（X）
      placeholder: "日期", // 水印
      position: "left", // 日期面板位置，默认null和left 居左，right则靠右
      lang: "zh-CN", // 语言，默认中文，可选值：zh-CN、en
      msgActiveName: "first",
      activeName: "second",
      isHoliday: true,
      DATENAME: {
        wuyi: "事"
      },
      HOLIDAYS: {
        wuyi: []
      },
      listQuery: {
        page: 1,
        limit: 999
      },
      currentPage: 1,
      pageSize: 7,
      type: "0",
      state: "1",
      themeCardList: [],
      hotAppList: [],
      myAppList: [],
      cardDataList: [],
      dayTodoList: [],
      todoList: [],
      launchList: [],
      joinList: [],
      msgList: [],
      newsList: []
    };
  },
  computed: {
    _dateMap() {
      return this._createDateMap();
    }
  },
  methods: {
    changeFun(val, oldVal) {
      this.themeCardList = this.cardDataList[val].cardList;
    },
    handleClick(tab, event) {

    },
    getBus() {
      return this.bus;
    },
    onDrawDate(e) {
      const date = e.date;
      if (new Date().getTime() > date.getTime()) {
        e.allowSelect = false;
      }
    },
    getDateInfo(v) {
      var iDiff = -1;
      var sNowDate = this.stringify(new Date());
      var sDateName = ["今天", "明天", "后天"];
      switch (true) {
        case v === sNowDate:
          iDiff = 0;
          break;
        case v === this.siblings(sNowDate, 1):
          iDiff = 1;
          break;
        case v === this.siblings(sNowDate, 2):
          iDiff = 2;
          break;
      }
      !this._dateMap &&
        this.isHoliday &&
        (this._dateMap = this._createDateMap());
      return (this._dateMap && this._dateMap[v]) || sDateName[iDiff];
    },
    _createDateMap() {
      var oTmp = {};
      for (var propety in this.HOLIDAYS) {
        var curHoliday = this.HOLIDAYS[propety];
        for (var i = 0; i < curHoliday.length; i++) {
          var sDate = curHoliday[i];
          var sName = this.DATENAME[propety];
          oTmp[sDate] = sName;
        }
      }
      return oTmp;
    },
    isDate(v) {
      if (v instanceof Date) {
        return true;
      }
      return false;
    },
    stringify(v) {
      if (!this.isDate(v)) return null;
      return (
        v.getFullYear() +
        "-" +
        this.filled(v.getMonth() * 1 + 1) +
        "-" +
        this.filled(v.getDate())
      );
    },
    siblings(v, n) {
      var REG = /\d+/g;
      v = v.match(REG);
      return this.stringify(new Date(v[0], v[1] - 1, v[2] * 1 + n * 1));
    },
    filled(v) {
      return String(v).replace(/^(\d)$/, "0$1");
    },
    changePane(year, month, pane) {
      this.events = [];
      // ajax data or ...
      setTimeout(() => {
        this.events = this.getEventContent(year, month, pane);
      }, 200);
    },
    foramtDay(el) {
      /* eslint-disable */
      var S = "",
        J,
        I;
      if (el.lDay == 1) {
        S =
          "<b>" +
          (el.isLeap ? "\u95f0" : "") +
          el.lMonth +
          "\u6708" +
          (lunar.monthDays(el.lYear, el.lMonth) == 29 ? "\u5c0f" : "\u5927") +
          "</b>";
      } else {
        S = lunar.cDay(el.lDay);
      }
      I = el.lunarFestival;
      if (el.lMonth == "4" && I.indexOf("\u7aef\u5348\u8282") != -1) {
        I = "";
        el.lunarFestival = "";
      }
      if (I.length > 0) {
        if (I.length > 7) {
          // I = I.substr(0, 5) + "\u2026"
          I = I.split(" ")[0];
        }
        I = I.fontcolor("#909090");
      } else {
        I = el.solarFestival;
        if (I.length > 0) {
          J = I.charCodeAt(0) > 0 && I.charCodeAt(0) < 128 ? 9 : 5;
          if (I.length > J + 1) {
            I = I.substr(0, J - 1) + "\u2026";
          }
          I = I.fontcolor("#909090");
        } else {
          I = el.solarTerms;
          if (I.length > 0) {
            I = I.fontcolor("#ff7200"); // 节日
          }
        }
      }
      if (I.length > 0) {
        S = I;
      }
      return S;
    },
    getDayCount(year, month) {
      const dict = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
      if (month === 1) {
        if (year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0)) {
          return 29;
        }
      }
      return dict[month];
    },
    dayClick(date, dateStr) {
      this.value = dateStr;
      getScheduleByDate(dateStr).then(res => {
        this.dayTodoList = res.data;
      });
    },
    getList() {
      getThemeList().then(res => {
        this.cardDataList = res.cardDataList;
      });
      getHotAppList().then(res => {
        this.hotAppList = res.serviceSubjectList;
      });
      getMyAppList().then(res => {
        this.myAppList = res.mySubjectList;
      });
      getAllTodoProcessTask(this.listQuery).then(res => {
        this.todoList = res.todoProcess; // 待办列表
        this.launchList = res.meLaunchProcess; // 发起列表
        this.joinList = res.meParticipateInProcess; // 参与列表
        this.activeName = "first";
      });
      getAllNotice(this.type, this.pageSize, this.currentPage).then(res => {
        this.msgList = res.msgList;
      });
      getMessageTask(this.state, this.currentPage, this.pageSize).then(res => {
        this.newsList = res.messageList;
      });
      getSchedule().then(res => {
        this.HOLIDAYS.wuyi = res.data.schedules.flat();
      });
    }
  },
  created() {
    this.getList();
  }
};
</script>

<style lang="scss" scoped>
.mark {
  top: 5px;
}

.homePage {
  width: 100%;
  height: auto;

  .appList {
    width: 100%;
    height: auto;
    padding: 25px 15px;
    background: #ffffff;
    .appListTitle {
      font-size: 16px;
    }
    .cardContainerAll {
      width: auto;
      ul {
        box-sizing: border-box;
        display: flex;
        flex: 1;
        justify-content: flex-start;
        flex-wrap: wrap;
        li {
          width: auto;
          list-style: none;
          margin-right: 10px;
        }
      }
    }
  }

  .appMiddleList {
    width: 100%;
    height: auto;
    // 中间部分
    .middleContainerAll {
      width: 100%;
      display: flex;
      margin-right: 1%;
      justify-content: flex-start;
      .middleContainer {
        width: auto;
        height: auto;
        min-height: 756px;
        padding: 15px;
        flex:1;
        background: #ffffff;
        .middleContainer-header {
          width: 100%;
          height: 40px;
          line-height: 40px;
          display: flex;
          flex: 1;
          justify-content: space-between;
          .title {
            font-size: 18px;
            font-weight: 400;
          }
          .more {
            font-size: 12px;
            color: #858585;
          }
        }

        .middleContainer-body {
          overflow: hidden;
          ul {
            height: 227px;
            padding: 0 20px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: flex-start;
            overflow-y: scroll;
            overflow-x: hidden;
            li {
              width: auto;
              // max-width: 45%;
              list-style: none;
              height: auto;
              margin: 5px 0px
            }
          }
        }

        .eventList {
          @extend .middleContainer-body;
          overflow: hidden;
          margin-right: -56px;
          margin-left: -39px;
          padding: 0 25px;
          ul {
            height: 400px;
            padding-right: 35px;
          }
        }
        .calenadar {
          height: 270px;
          display: flex;
          justify-content: center;
        }

        .msgCenter {
          width: 100%;
          padding: 20px;
          margin: -15px 0px;
          background: #ffffff;
        }

        .themeCenter {
          @extend .msgCenter;
          height: 360px;
          margin-top: 15px;
          padding: 0px;
          overflow: hidden;
        }
      }
    }
  }
}

/*轮播图样式重写*/
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 60px;
  margin: 0;
}

.themeContainer {
  width: 100%;
  height: auto;
  padding: 0px;
  img {
    width: 100%;
    height: auto;
    height: 150px;
  }
  .themeSign {
    position: absolute;
    top:22px;
    left: 30px;
    font-size: 18px;
    color: white;
    font-weight: 800;
  }
  .themeTitle {
    position: absolute;
    top:42px;
    left: 30px;
    color: white;
    font-size: 14px;
  }
  .themeContent {
    position: absolute;
    top:62px;
    left: 30px;
    color: white;
    font-size: 12px;
  }
}
</style>
